/*
 * @Author: tomystery 
 * @Date: 2018-07-11 17:52:08 
 * @Last Modified by: t
 * @Last Modified time: 2018-07-15 17:52:46
 */

import React from 'react';
import { Link } from 'react-router-dom';

import PageTitle from 'component/page-title/index.jsx';
import MUtil from 'util/mm.jsx';
import Product from 'service/product-service.jsx';


const _mm = new MUtil();
const _product = new Product();
class productList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            categoryId:this.props.match.params.categoryId || 0,
            firstLoading:true
        }
    }
    componentDidMount() {
        this.loadProductList();
    }
    
    componentDidUpdate(prevProps, prevState){
        let oldPath = prevProps.location.pathname,
            newPath = this.props.location.pathname,
            newId   = this.props.match.params.categoryId || 0;
        if(oldPath !== newPath){
            this.setState({
                categoryId : newId
            }, () => {
                this.loadProductList();
            });
        }
    }
    //加载品类列表
    loadProductList() {
        _product.getProductCategoryList(this.state.categoryId).then(res => {
            this.setState({
                list:res
            });
        }, errMsg => {
            this.setState({
                list:[]
            });
            _mm.errTips(errMsg);
        });
    }
   
//更新品类的名字
onUpdateName(categoryId,categoryName){
    let newName=window.prompt('请输入新的品类名称',categoryName);
    if(newName){
        _product.updateCategoryName(categoryId,newName).then(res=>{
            _mm.successTips(res);
            this.loadProductList();
        },errMsg=>{
            _mm.errTips(errMsg);
        })
    }
}
    render() {
        let tableList = this.state.list.map((category, index) => {
            return (<tr key={index}>
                <td>{category.id}</td>
                <td>{category.name}</td>
                <td><a  className="opera" onClick={(e)=>this.onUpdateName(category.id,category.name)} style={{marginRight:'5px'}}>修改名称</a>
                {category.parentId === 0 ? <Link to={`/product-category/index/${category.id}`}>查看其子品类</Link> :null }
                </td>
            </tr>
        );
        });
        let tableBody = this.state.list.length > 0 ? tableList : <tr  colSpan="5" className='text-center'><td>{this.state.firstLoading ? "正在加载数据..." : "没有找到相应的结果！！"}</td></tr>
        return (
            <div id='page-wrapper'>

                <div className='row'>
                    <div className='col-md-12'>
                        <PageTitle   title={this.state.categoryId ? "编辑商品"  : "添加商品"}/>
                        <Link to='/product-category/add' className='product-save'><button className='btn-primary'><i className="fa fa-plus fa-fw"></i>添加品类</button></Link>
                    </div>
                </div>
                <div className='row'>
                    <div className='col-md-12'>
                        <p>当前商品ID:{this.state.categoryId}</p>
                        <table className='table table-striped table-bordered'>
                            <thead>
                                <tr>
                                    <th>品类ID</th>
                                    <th>品类名称</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {tableBody}

                            </tbody>
                        </table>
                     
                    </div>
                </div>


            </div>
        )
    }
}

export default productList